<template>
  <view class="sign-wrap">
	  <view class="date-time flex-a padtb20 pad-l40">
	  	<u--image
	  		:showLoading="true" 
	  		:src="getImg('date-l-icon')"
	  		width="14rpx" 
	  		height="20rpx"
			@click="changeDate('prev')"
	  	></u--image>
	  	<view class="time-txt marlr24">
	  		{{ curDate }}
	  	</view>
	  	<u--image
	  		:showLoading="true" 
	  		:src="getImg('date-r-icon')"
	  		width="14rpx" 
	  		height="20rpx"
			@click="changeDate('next')"
	  	></u--image>
	  </view>
	  <u-line  color="#E6E6E6"></u-line>
		<view class="date-wrap">
			<!-- <view class="cur-date">{{curDate}}</view> -->
			<view class="title-item-box item-box" >
				<view class="item week-item"
					v-for="(item, index) in ['日','一','二','三','四','五','六']" 
					:key="index">
					周{{item}}
				</view>
			</view>
			<view class="date-item-box item-box">
				<view class="item date-item flex-col flex-center"  
					:class="{disabled:item.disabled,active:item.isToday,'showBlock': item.date}" 
					:style="itemStyle"
					@tap="tapThis(item)"
					v-for="(item, index) in dateArray" 
					:key="index"
				>
					<text >{{item.date}}</text>
					<text class="is-sign-in" v-if="item.date && !item.gtToday">未签到</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data () {
    return {
			itemStyle:'',
			curDate:'', //当前日期
			dateArray:[],
			timestamp: +new Date()
    }
  },
	methods :{
		// 日期切换
		changeDate(type) {
			const result = this.getAdjacentMonthTimestamps(this.timestamp);
			let timestampEnum = {
				"next": result.nextMonthTimestamp,
				"prev": result.prevMonthTimestamp
			}
			this.timestamp = timestampEnum[type];
			this.getCurDate();
		},
		// 获取上月 和 下月的时间戳
		getAdjacentMonthTimestamps(timestamp) {
		    // 创建一个新的 Date 对象，使用传入的时间戳
		    let date = new Date(timestamp);
		
		    // 获取当前的年月日
		    let currentYear = date.getFullYear();
		    let currentMonth = date.getMonth();
		    let currentDate = date.getDate();
		
		    // 获取上个月
		    let prevMonthDate = new Date(currentYear, currentMonth - 1, currentDate);
		    
		    // 如果上个月没有该日（比如31号），则调整到上个月的最后一天
		    if (prevMonthDate.getMonth() === currentMonth - 1) {
		        // 如果能保持月份不变，说明上个月有这个日期，返回该日期
		        prevMonthDate = new Date(currentYear, currentMonth - 1, currentDate);
		    } else {
		        // 否则，返回上个月的最后一天
		        prevMonthDate = new Date(currentYear, currentMonth, 0);  // 当前月的0号是上个月的最后一天
		    }
		    let prevMonthTimestamp = prevMonthDate.getTime();
		
		    // 获取下个月
		    let nextMonthDate = new Date(currentYear, currentMonth + 1, currentDate);
		    
		    // 如果下个月没有该日（比如2月30日），则调整到下个月的最后一天
		    if (nextMonthDate.getMonth() === currentMonth + 1) {
		        // 如果能保持月份不变，说明下个月有这个日期，返回该日期
		        nextMonthDate = new Date(currentYear, currentMonth + 1, currentDate);
		    } else {
		        // 否则，返回下个月的最后一天
		        nextMonthDate = new Date(currentYear, currentMonth + 2, 0);  // 下个月的0号是下个月的最后一天
		    }
		    let nextMonthTimestamp = nextMonthDate.getTime();
		
		    return {
		        prevMonthTimestamp,
		        nextMonthTimestamp
		    };
		},
		getCurDate () {
			this.dateArray = [];
			let d = new Date(this.timestamp)
			let y = d.getFullYear()
			let m = d.getMonth()
			let week = new Date(y, m, 1).getDay() //一号是周几
			m = m === 11 ? 12 : m+1 //月份转换
			let max = new Date(y, m, 0).getDate() //本月最大天
			let day = d.getDate()
			// this.curDate = `${y}年${m}月${day}日`
			this.curDate = `${y}年${m}月`
			// 1号之前留白,对应正确的周几
			for(let i=0; i<week; i++){
				let obj = {
					year:'',
					month: '',
					date:'',
					disabled:false,
					isToday:false
				}
				this.dateArray.push(obj)
			}
			for(let i=0; i<max; i++){
				let today = i+1
				let obj = {
					year:y,
					month: m,
					date: today,
					disabled: today < day,
					isToday:today == day,
					gtToday: today > day
				}
				this.dateArray.push(obj)
			}
		},
		//点击日期
		tapThis ( e ) {
			if(!e.date) return
			const data = {
				year: e.year,
				month:e.month,
				date:e.date,
				type :'today' //默认点击今天
			};
			//点击今天之前
			(e.disabled && !e.isToday) && (data.type = 'pre');
			//点击今天之后
			(!e.disabled && !e.isToday) && (data.type = 'next');
			this.$emit('tapDate', data)
		}
	},
	mounted () {
		//设置天数高度
		let nodes = uni.createSelectorQuery().in(this).select('.item')
		nodes.fields({
		  size: true,
		}, data => {
			this.itemStyle = `margin: 8rpx calc((100% - ${data.width*7}px) / 14);`
			// this.itemStyle = `margin: 10rpx 9rpx;`
		}).exec();
		//设置日期
		this.getCurDate()
	}
}
</script>

<style scoped lang="scss" >
	.date-time {
		.time-txt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
	}
	.date-wrap{
		width: 96%;margin-left: 2%;padding: 2% 0;border-radius: 16rpx;background: #fff;box-sizing: border-box;text-align: center;
		.cur-date{font-size: 30rpx;}
		.item-box{
			display: flex;
			color: #777;
			flex-wrap: wrap;
			font-size: 28rpx;
			justify-content: flex-start;
			.week-item {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
			.item{
				width: calc(100% / 10);
				width: 12%;
				margin: 10rpx auto;
				border-radius: 12rpx;
			}
			.disabled{
				// background: #efefef;
				// color: #999;
			}
			.active{
				background: linear-gradient( 135deg, #FF63AE 0%, #FF7171 100%);
				color: #FFFFFF;
				.is-sign-in {
					color: #FFFFFF;
				}
			}
		}
		.showBlock {
			// width: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			height: 108rpx;
			background: #F5F5F5;
			border-radius: 12rpx;
			.is-sign-in {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #444444;
			}
		}
	}
	
</style>
